<template>
  <div class="execution">
    <basic-container>
      <!--基本信息-->
      <h2 class="title">基础信息</h2>
      <div class="basics">
        <template>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6">
              <div class="grid-content bg-purple">退货订单：{{topData.returnSn}}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple"></div>申请时间：{{topData.createDate}}
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light"></div>货品金额：{{topData.sumAmount}}
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                合计金额：
                {{topData.totalAmount}}
              </div>
            </el-col>
          </el-row>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple"></div>客户名称：{{topData.returnCustomer}}</el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                备注：<el-input v-model="remarks" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                其他金额：<el-input v-model="otherAmount"  v-enter-number type="number" oninput="if(value.length>8)value=value.slice(0,8)" @change="cuntNum" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
          </el-row>
        </template>
      </div>

      <h2 class="title">请款清单</h2>

      <!--请款清单数据表格-->
      <div class="requestPayoutTable">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              type="index" show-overflow-tooltip
              label="序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="goodsImg"
              label="商品图片"
              width="180">
              <template slot-scope="scope">
                <img :src="scope.row.goodsImg" height="50px"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位">
            </el-table-column>
            <el-table-column
              prop="goodsPrice"
              label="申请退货单价">
            </el-table-column>
            <el-table-column
              label="申请退货数">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.goodsNum" v-enter-number type="number" oninput="if(value.length>8)value=value.slice(0,8)" placeholder="请输入内容" @change="cuntNum(scope.row)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="备注">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remark" placeholder="请输入内容" maxlength="20"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="aggregate">
        <h4>商品数量  {{totalNum}}  件&nbsp;&nbsp;&nbsp;合计金额：￥{{totalPrice.toFixed(2)}}</h4>
      </div>
      <div class="buttonGroup">
        <el-button type="primary" @click="save(3)">审核通过</el-button>
        <el-button type="primary" @click="save(2)">审核不通过</el-button>
        <el-button type="primary" @click="close">取消</el-button>
      </div>
    </basic-container>
  </div>
</template>

<script>
  import {
    getDetail,
    returnOrder
  } from '@/api/scm/order/return_order'
  import {
    mapGetters
  } from 'vuex'
  import Util from '@/util/pds/utils';
  let cookieUtil = new Util();
  export default {
    name: "index",
    data() {
      return {
        dialogImageUrl: "",
        dialogVisible: false,
        input: "",
        refundableAmount: "",
        remarks: "",
        formInline: {
          serialNum: ""
        },
        tableData: [],
        totalNum:0,
        totalPrice:0,
        PleMoney: "",
        topData:'',
        otherAmount:''
      };
    },
    computed: {
      ...mapGetters(['tagWel', 'tagList', 'tag', 'website']),
      tagLen() {
        return this.tagList.length || 0
      }
    },
    created(){
      this.init();
    },
    methods: {
      init(){
        let params = JSON.parse(this.$route.query.res);
        params.purchaseSn = params.orderSn;
        getDetail(params).then(response => {
          response.data.data.detailList.forEach((item)=>{
            item.realBuyNum = item.goodsNum
          })
          this.topData = response.data.data;
          this.tableData = this.topData.detailList;
          this.totalPrice = this.topData.sumAmount + this.topData.otherAmount;
          this.totalNum = this.tableData.length;
          this.otherAmount = this.topData.otherAmount;
          this.remarks = this.topData.remarks;
        })
      },
      cuntNum(row){
        this.totalPrice = 0;
        this.tableData.forEach(item=>{
          this.totalPrice += item.goodsPrice*item.goodsNum;
        })
        this.totalPrice = parseInt(this.totalPrice) + parseInt(this.otherAmount);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //提交
      save(status){
        this.topData.editDetails = this.topData.detailList;
        let params = this.topData;
        params.returnStatus = status;
        params.otherAmount = this.otherAmount;
        params.remarks = this.remarks;
        delete params.detailList;
        returnOrder(params).then(res=>{
          if(res.code=200){
            this.$message.success("审核成功");
            let _this = this;
            setTimeout(function () {
              _this.close();
            },2000)
          }else{
            this.$message.error("审核失败")
          }
        });
      },
      close(){
        var str_before = location.href.split('#')[1];
        let { tag, key } = this.findTag(str_before);
        this.$store.commit('DEL_TAG', tag);
        this.$router.go(-1);
      },
      findTag(value) {
        let tag, key
        this.tagList.map((item, index) => {
          if (item.value === value) {
            tag = item
            key = index
          }
        })
        return { tag: tag, key: key }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .refReason{
    overflow: hidden;
    line-height: 36px;
  }
  .refReason h3{
    margin-right: 10px;
  }
  .requestPayoutTable {
    margin: 20px 0;
  }
  .aggregate {
    &:after {
      content: "";
      height: 0;
      display: block;
      overflow: hidden;
      clear: both;
    }
    h4 {
      float: right;
      font-weight: 400;
    }
  }
  .title {
    span {
      font-size: 14px;
      font-weight: 400;
      color: #999;
    }
  }
  .addImg {
    margin-top: 20px;
  }
  .refReason {
    margin-top: 20px;
    .el-select {
      width: 40% !important;
    }
  }
  .buttonGroup {
    margin-top: 20px;
  }

  .io-goods-detail {
    margin-left: 10px;
  }
  .settle-accounts {
    text-align: right;
  }
  .basic-information {
    margin-top: 20px;
    font-weight: inherit;
  }
  .return-btn {
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
  }
  .tabContent {
    padding-left: 10px;
    .el-tabs__item {
      font-size: 20px;
    }
  }
  .basics {
    .el-input {
      width: 60%;
    }
  }
</style>
